<!-- eslint-disable vue/no-mutating-props -->
<template>
  <!-- 上方搜索 -->
  <el-form :inline="true" class="upsearch" :model="searchObj">
    <el-form-item v-for="(item, index) in searchConfig" :key="index" :label="item.label">
      <template v-slot:label>
        <span>{{ item.label }}</span>
      </template>
      <template v-if="item.type === 'input'">
        <el-input
          v-model="searchObj[item.value]"
          placeholder="请输入"
          :suffix-icon="Search"
          clearable="true"
          @input="onInput(item.value)"
        />
      </template>
      <template v-if="item.type === 'select'">
        <el-select
          v-model="searchObj[item.value]"
          :multiple="item.multiple || false"
          placeholder="请选择"
          clearable="true"
        >
          <el-option
            v-for="selectitem in item.options"
            :key="selectitem.value"
            :label="selectitem.label"
            :value="selectitem.label"
          />
        </el-select>
      </template>
      <template v-if="item.type === 'date'">
        <el-date-picker
          v-model="searchObj[item.value]"
          type="date"
          placeholder="Pick a day"
          format="YYYY-MM-DD"
          clearable="true"
        />
      </template>
      <template v-if="item.type === 'daterange'">
        <el-date-picker
          v-model="searchObj[item.value]"
          type="daterange"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          clearable="true"
        />
      </template>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSearch">查询</el-button>
      <el-button @click="searchCancel">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { ref } from 'vue'
const emits = defineEmits(['onSearch', 'searchCancel', 'onInputArea', 'onInputPhone'])

const searchObj = ref({}) // 双向绑定值
const props = defineProps({
  // 配置可查询字段，key为table每列的key--tableColumns的prop
  searchObject: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 配置查询的slot类别及可查询的key，value为key值
  searchConfig: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

onMounted(() => {
  // Vue3 使用 Proxy 实现响应式系统，所以即使是解构后的引用，其内部仍然保持着与原始对象的连接。因此，当直接修改 searchObj.value 时，实际上是更改了原对象的值，
  // 这违反了单向数据流的原则。为了避免这种情况，你应该避免直接修改 prop，而是考虑将 prop 的值复制到本地状态（使用 reactive 或 ref) 再进行操作，或者使用自定义事件 (emit) 向父组件传达更新请求。
  // 不推荐这样子写https://blog.csdn.net/qq_42266115/article/details/122484726
  searchObj.value = props.searchObject // 接收外部配置
})

/**
 * @description 搜索
 */
function onSearch() {
  // emits('onSearch', searchObj.value)
  emits('onSearch')
}

/**
 * @description 重置
 */
function searchCancel() {
  emits('searchCancel')
}
// function onInput() {
//   emits('onInput')
// }
function onInput(value) {
  switch (value) {
    case 'activeNum':
      emits('onInputArea')
      break
    case 'activeName':
      console.log(searchObj.value)

      emits('onInputPhone')
      break
  }
}
</script>

<style lang="scss" scoped></style>
